<template>
  <view class="wrong-container">
    <view class="header">
      <view class="title">错题集</view>
      <view class="subtitle">总共 {{ wrongQuestions.length }} 道错题</view>
    </view>
    
    <view class="empty-state" v-if="wrongQuestions.length === 0">
      <image class="empty-image" src="/static/images/empty-state.png" mode="aspectFit"></image>
      <text class="empty-text">没有错题记录</text>
      <button class="back-btn" @click="backToResults">返回结果页</button>
    </view>
    
    <scroll-view v-else scroll-y class="question-list">
      <view 
        v-for="(question, index) in wrongQuestions" 
        :key="question.id" 
        class="question-item"
        @click="viewQuestionDetail(question)"
      >
        <view class="question-header">
          <text class="question-number">{{ index + 1 }}</text>
          <text class="question-type">{{ formatQuestionType(question.question_type) }}</text>
        </view>
        
        <view class="question-content">
          <text class="content-text">{{ question.content }}</text>
          
          <view class="question-image" v-if="question.image_url">
            <image :src="question.image_url" mode="aspectFit"></image>
          </view>
        </view>
        
        <view class="answer-section">
          <view class="user-answer" :class="{ 'wrong': true }">
            <text class="label">你的答案:</text>
            <text class="value">{{ question.userAnswer }}</text>
          </view>
          
          <view class="correct-answer">
            <text class="label">正确答案:</text>
            <text class="value">{{ question.answer }}</text>
          </view>
        </view>
        
        <view class="action-row">
          <view class="view-detail">
            <text>查看详情</text>
            <text class="icon">></text>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <view class="bottom-actions">
      <button class="action-btn primary" @click="restartExam">重新练习错题</button>
      <button class="action-btn secondary" @click="backToResults">返回结果页</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      wrongQuestions: []
    }
  },
  onLoad() {
    // 从本地存储获取错题列表
    try {
      const questions = uni.getStorageSync('wrongQuestions');
      if (questions && questions.length > 0) {
        this.wrongQuestions = questions;
      }
    } catch (e) {
      console.error('获取错题失败', e);
    }
    
    // 设置导航栏标题
    uni.setNavigationBarTitle({
      title: '错题集'
    });
  },
  methods: {
    formatQuestionType(type) {
      const typeMap = {
        'single': '单选题',
        'multiple': '多选题',
        'judge': '判断题',
        'fill': '填空题'
      };
      return typeMap[type] || type;
    },
    viewQuestionDetail(question) {
      // 保存当前查看的问题到本地存储
      uni.setStorageSync('currentQuestion', question);
      uni.navigateTo({
        url: `/pages/exam/detail?id=${question.id}`
      });
    },
    restartExam() {
      // 获取考试信息
      try {
        const examResults = uni.getStorageSync('examResults');
        if (examResults) {
          const { subject, vehicleType } = examResults;
          
          // 创建错题练习，只包含错题
          const questionIds = this.wrongQuestions.map(q => q.id);
          
          // 保存错题练习信息
          uni.setStorageSync('wrongPracticeInfo', {
            subject,
            vehicleType,
            examType: 'wrongPractice',
            questionIds
          });
          
          // 跳转到考试页面，带上错题练习标识
          uni.navigateTo({
            url: `/pages/exam/index?subject=${subject}&vehicleType=${vehicleType}&examType=wrongPractice`
          });
        } else {
          uni.showToast({
            title: '无法获取考试信息',
            icon: 'none'
          });
        }
      } catch (e) {
        console.error('创建错题练习失败', e);
        uni.showToast({
          title: '创建错题练习失败',
          icon: 'none'
        });
      }
    },
    backToResults() {
      uni.navigateBack();
    }
  }
}
</script>

<style lang="scss">
.wrong-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f8f8f8;
}

.header {
  padding: 30rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }
  
  .subtitle {
    font-size: 28rpx;
    color: #666;
  }
}

.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  
  .empty-image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 30rpx;
  }
  
  .empty-text {
    font-size: 32rpx;
    color: #999;
    margin-bottom: 40rpx;
  }
  
  .back-btn {
    width: 300rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 40rpx;
    background-color: #1890ff;
    color: #fff;
    font-size: 30rpx;
  }
}

.question-list {
  flex: 1;
  padding: 20rpx;
}

.question-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  
  .question-header {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    .question-number {
      width: 50rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      background-color: #1890ff;
      color: #fff;
      border-radius: 25rpx;
      font-size: 28rpx;
      margin-right: 20rpx;
    }
    
    .question-type {
      font-size: 28rpx;
      color: #666;
      background-color: #f0f0f0;
      padding: 6rpx 16rpx;
      border-radius: 20rpx;
    }
  }
  
  .question-content {
    margin-bottom: 20rpx;
    
    .content-text {
      font-size: 32rpx;
      color: #333;
      line-height: 1.6;
    }
    
    .question-image {
      margin-top: 20rpx;
      
      image {
        width: 100%;
        max-height: 300rpx;
        border-radius: 8rpx;
      }
    }
  }
  
  .answer-section {
    background-color: #f8f8f8;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    
    .user-answer, .correct-answer {
      display: flex;
      margin-bottom: 10rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .label {
        font-size: 28rpx;
        color: #666;
        width: 160rpx;
      }
      
      .value {
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
      }
      
      &.wrong .value {
        color: #f5222d;
      }
    }
    
    .correct-answer .value {
      color: #52c41a;
    }
  }
  
  .action-row {
    display: flex;
    justify-content: flex-end;
    
    .view-detail {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #1890ff;
      
      .icon {
        margin-left: 10rpx;
      }
    }
  }
}

.bottom-actions {
  padding: 20rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  display: flex;
  gap: 20rpx;
  
  .action-btn {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 40rpx;
    font-size: 30rpx;
    
    &.primary {
      background-color: #1890ff;
      color: #fff;
    }
    
    &.secondary {
      background-color: #f0f0f0;
      color: #333;
    }
  }
}
</style> 